<template>
  <div class="Footer">
    <div class="title">内容管理-页尾管理</div>
    <div class="UserAg_bg">
      <div class="UserAg_btn">
        <router-link
          v-for="(item,index) in btnlist"
          :key="index"
          :to="item.to"
          class="footer-nav"
        >{{item.name}}</router-link>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>




<script>
export default {
  name: 'Footer',
  data() {
    return {
      btnlist: [
        { name: '联系我们', id: 0, isActive: true, to: '/Footer/contact' },
        { name: '文章管理', id: 1, isActive: false, to: '/Footer/essay' },
        { name: '友情链接', id: 2, isActive: false, to: '/Footer/link' },
        { name: '关键字', id: 3, isActive: false, to: '/Footer/keyword'}
      ]
    }
  },
  methods: {},
  created() {

  }
}
</script>

<style lang="scss" scoped>
.Footer {
  width: 100%;
  /*height: 100vh;*/
  /*padding-left: 10px;*/
  background-color: #f7f9fc;
  font-size: 12px;
  overflow-x: hidden;
  .footer-nav {
    margin: 0 40px 0 0;
    width: 125px;
    color: #333;
    background: #f7f9fc;
    border-radius: 5px;
    border: 1px solid rgba(211, 219, 235, 1);
    text-align: center;
    line-height: 50px;
    font-size: 16px;
  }
  .router-link-active {
    background: #3377ff;
    color: #fff;
    border: none;
  }
}

.title {
  height: 33px;
  line-height: 33px;
}

.UserAg_bg {
  width: 100%;
  /*height: 600px;*/
  background-color: white;
}

.UserAg_btn {
  display: flex;
  flex-direction: row;
  margin-left: 48px;
  padding-top: 29px;
  color: #333;
  cursor: default;
}

.UserAg_btn > div {
  width: 125px;
  height: 50px;
  font-size: 14px;
  border: 1px solid #f7f7f7;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  margin-right: 42px;
}

.UserAg_btn > div:nth-child(1) {
  margin-right: 57px;
}
</style>
